import React from "react";
import "./App.css";
function tabs() {
  return new Array(10).fill().map((v, i) => {
    const index = i + 1;
    return {
      title: "标题" + index,
      children: new Array(Math.floor(Math.random() * 10)).fill().map((v, i) => {
        const index1 = i + 1;
        return {
          title: "内容" + index + "-" + index1,
        };
      }),
    };
  });
}

// 类组件
class App extends React.Component {
  // 定义数据
  state = {
    count: 1,
    className: "active",
    flag: false,
    num: 100,
    //
    show: true,
    list: ["a", "b", "c", "d"],
    tabs: tabs(),
    activeIndex: 0,
    username: "123",
  };
  changeIndex(i) {
    // 类组件修改内容数据 唯一 方法
    this.setState({
      activeIndex: i,
    });
  }
  submit() {
    console.log(this.state.username)
  }
  render() {
    const {
      count,
      className,
      flag,
      num,
      show,
      list,
      tabs,
      activeIndex,
      username,
    } = this.state;
    return (
      <div>
        {/* 受控组件： 被react 状态控制的表单元素，必须 会有value｜checked 和 onchange */}
        <input
          type=""
          placeholder="请输入用户名"
          value={username}
          onChange={(e) => this.setState({ username: e.target.value })}
        />
        <br />
        <input type="" placeholder="请输入密码" />
        <br />
        <button onClick={() => this.submit()}>提交</button>
        <br />
        <hr />
        <h2>{count}</h2>
        <h3 className={flag ? className : ""}>123</h3>
        <h4>{count + num}</h4>
        <h5 className={className + count + num}>123</h5>

        {/* 条件渲染 */}
        <hr />
        <h1 style={{ display: show ? "block" : "none" }}>哈哈哈哈</h1>
        {show && <h2>哈哈哈哈哈</h2>}
        {/* 循环渲染 */}
        <ul>
          {list.map((v, i) => {
            return <li key={i}>{v}</li>;
          })}
        </ul>

        {/* tabs 切换 */}
        <div>
          {tabs.map((v, i) => {
            return (
              <span
                key={i}
                className={i === activeIndex ? "active" : ""}
                style={{ margin: "0 6px" }}
                onClick={() => this.changeIndex(i)}
                onMouseEnter={() => this.changeIndex(i)}
              >
                {v.title}
              </span>
            );
          })}
        </div>

        <ul>
          {tabs[activeIndex].children.map((v, i) => {
            return (
              <li key={i} onClick={() => alert(v.title)}>
                {v.title}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default App;
